{extend name="./app/admin/view/main.html" /}
{block name="title"}网站模板 - {__block__}{/block}
{block name="style"}
<style>
     .template-item {
        position: relative;
    }
    .template-item img {
        /*width: 100%;
        height: auto;
        cursor: pointer;*/
        width: 94%;
	    height: auto;
	    cursor: pointer;
	    height: 78%;
	    margin: 50px 15px;
    }
   .template-item .ivu-icon-checkmark-circled {
        position: absolute;
        top: 2px;
        right: 5px;
    }
    .nice-box .p-1{
        font-size: 18px;
        text-align: center;
        background:#eef1f5;
    }

    .col-md-4{
    	max-width: 20%;
    }

    .template-item{
    	background: url('/uploads/template_img/bj.png') no-repeat;
    	height:500px;
    	background-size:100% 100%;
    }
    .ivu-prev{
	width:180px;
 	margin-right:30px;
 	height:40px;
}
.ivu-prevs:hover{
 	background:#e1e1e1;
 	border:#e1e1e1;
 	color:#333;
 }
 .nice-box{
    	background:none;
    }
        .content-box .nice-box-body{
    	    min-height: 500px;
    }

</style>
<link rel="stylesheet" href="{$domainStatic}/{$assets}/admin/css/jquery.bigcolorpicker.css" type="text/css" />
{/block}

{block name="main"}
 
<header class="nicemip-container-header">
    <div class="float-left header-group">
        <h4 class="title">设置</h4> <h5 class="sub-title">网站模板</h5>
    </div>
   <a class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle" href="http://www.mipmb.com">
        <span>更多模板</span>
    </a>
</header>

<main class="nicemip-container-body" style="height: calc(100% - 50px)">
	<aside class="side-box nice-box" style="height: calc(100% - 50px - 92px);bottom: 15px;">
	    <section class="side-box-body">
	        <section class="side-list">
	            <ul>
	                <li :class="item" @click="TpSelect"><a href="javascript:">模板选择</a></li>
	                <li :class="item1" @click="TpSetting"><a href="javascript:">模板设置</a></li>
	                
	            </ul>
	            
	        </section>
	    </section>
	</aside>
	<section class="content-box" v-show="content1">
		    <div class="row">
		        <div class="col-md-4" v-for='item in templateList'>
		            <section class="nice-box">
		                <section class="nice-box-body template-item">
		                    <Icon type="checkmark-circled" v-if='item.status' size='26' color='#00aaee'></Icon>
		                    <img :src="item.info.thumbnail" @click='chooseTemplate(item.fileName)'/>
		                    
		                </section>
		                <h4 class="p-1">{{item.info.name}}</h4>
		            </section>
		        </div>
		    </div>
	</section>
<section class="content-box" v-show="content2">
	<section class="nice-box">
		<section class="nice-box-heading">
					        <h3>模板设置</h3>
		</section>
	        <section class="nice-box-body">
						        <div class="row">
						            <div class="col-md-6">
						                <i-form label-position="top">
						                    
						                    <Form-item label="主题颜色">
						                         <input   type="text" v-model="setting.siteColor" class="ivu-input"  style=" width: 100px;" name="siteColor"   />
						                        <input  id="color_b" type="bottun" readonly class="ivu-input" :style="baseStyles"/>
						                      
						                    </Form-item>
						                    <Form-item label="网站Logo">
						                    	 <img  :src="imgLogo" style="width:52px; margin-right:15px;">
						                    	<input type="file" name="fileLogo" class="form-control"  @change="getFile($event,'logo')" style="display: none;">
						                    	<button v-show="addpL" type="button" class=" ivu-btn ivu-btn-primary ivu-btn-circle" @click='addPic($event,"logo")'>
											        <span>添加图片 </span>
											    </button><font style="color:red;margin-left:15px;">(logo尺寸 52*52 推荐)</font>
											    <img v-show="addhL" src="{$domainStatic}/{$assets}/admin/images/0H1232460-0.jpg" />
						                    </Form-item>
						                    <Form-item label="Banner图">
						                    	 <img v-for="site in imgList" :src="site" style="width:180px; margin-right:15px;">
						                    	<input type="file" name="fileBanner" class="form-control" multiple  @change="getFile($event,'banner')" style="display: none;">
						                    	<button v-show="addpI" type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click='addPic($event,"banner")'>
											        <span>添加图片</span>
											    </button>
											    <img v-show="addhI" src="{$domainStatic}/{$assets}/admin/images/0H1232460-0.jpg" />
						                    </Form-item>
						                   
						                </i-form>
						            </div>
						        </div>
		</section>	
						<p style="line-height:70px; margin-left:30px;">
					    	<button type="button" class=" ivu-btn ivu-prev ivu-prevs" @click="showHtml"><span>预览</span></button> 
					    	<button type="button" class=" ivu-btn ivu-btn-primary ivu-prev" @click="submitSetting"><span>确认</span></button> 
					    </p>
	</section>

	 
</section>
</main>
{/block}
    
{block name="javascript"}
{__block__}
<script src="{$domainStatic}/{$assets}/admin/js/jquery.bigcolorpicker.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            templateList: [],
            siteInfo: '',
            content1:true,
            content2:false,
            item:'nav-item active',
            item1:'nav-item',
            setting:[],
            baseStyles:{
 					width: '25px',
 				    height: '25px',
 				    padding: '0px',
 				    border: '0px',
 				    cursor: 'pointer',
 				    background:'#333',
             },
            addpI:true,
 			addhI:false,
 			addpL:true,
 			addhL:false,
 			imgList:'',
            imgLogo:'http://init.nicemip.cxm/public/assets/ms/images/logo.png',
        },
        watch: {
            siteChangeStatus() {
                this.getSettingData();
            }
        },
        mounted() {
            this.getSettingData();
        },
        methods: {
            getTemplateList() {
                var _this = this;
                this.$nicemip.ajax('{$domain}/setting/ApiAdminTemplate/templateList', {
                }).then(function(res) {
                    if(res.code == 1) {
                        var templateList = res.data;
                        for (var i = 0; i < templateList.length; i++) {
                            if (templateList[i].fileName == _this.siteInfo.template) {
                                templateList[i].status = true;
                            } else {
                                templateList[i].status = false;
                            }
                              
                        }
                        _this.templateList = templateList;
                    }
                });
            },
            getSettingData() {
                var _this = this;
                this.loading = true;
                this.$nicemip.ajax('{$domain}/setting/ApiAdminSetting/settingSelect', {
                    
                }).then(function(res) {
                    _this.loading = false;
                    if(res.code == 1) {
                        _this.siteInfo = res.data;
                        var temp = res.data;
                        //颜色选择器赋值
                        temp.selectColor = temp.siteColor;
                       	//默认颜色
                       	_this.baseStyles.background= temp.siteColor;
                    	_this.imgList = temp.siteData.siteImgArr;
                       	_this.imgLogo = temp.siteLogos;
                        _this.setting = temp;
                        //获取模板列表
                        _this.getTemplateList();
                        
                    }
                });
            },
            chooseTemplate(val) {
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定切换成您选择的模板？</p>',
                    onOk: () => {
                        var _this = this;
                        this.$nicemip.ajax('{$domain}/setting/ApiAdminTemplate/templateSave', {
                            fileName: val,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success('设置成功');
                                _this.getSettingData();
                            }
                        });
                    }, 
                    onCancel: () => {
                        //
                    }
                });
            },
            TpSelect:function(){
            	this.content1 = true;
            	this.content2 = false;
            	this.item = 'nav-item active';
            	this.item1 = 'nav-item';
            },
            TpSetting:function(){
				this.content1 = false;
            	this.content2 = true;
            	this.item = 'nav-item';
            	this.item1 = 'nav-item active';
            },
            //预览
            showHtml:function(){
            	window.open('{$webUrl}');
            },
            
            //确认提交
            submitSetting:function(){
            	this.setting = {
           			'siteColor' : this.setting.siteColor,
           			'siteLogo' : this.setting.siteLogo,
           			'siteImg' : this.setting.siteImg,
           		}
           		//提交设置
           		var _this = this;
	            this.$nicemip.ajax('{$domain}/setting/ApiAdminSetting/settingEdit', {
	                    setting: JSON.stringify(this.setting),
	                }).then(function(res) {
	                    if(res.code == 1) {
	                    	_this.$Modal.confirm({
		                    title: '消息提示',
		                    content: '<p>网站模板设置成功</p>',
			                    onOk: () => {
			                        
			                    }, 
			                    onCancel: () => {
			                        //
			                    }
		                	});
	                        
	                    }
	            });
	        },
            getFile: function (event,type) {
            	var that = this;
            	var leng=event.target.files.length;
            	let form = new FormData();
            	var fileList = [];
            	for(var i=0;i<leng;i++){
            		fileList.push(event.target.files[i]);
            	}
            	fileList.forEach(function (file) {
                	form.append('files[]', file, file.name);
            	})
  				//隐藏按钮  现在加载
  				if(type == 'logo'){
  					that.addpL = false;
  					that.addhL = true;
  				}else{
  					that.addpI = false;
  					that.addhI = true;
  				}
  				
        		let config = { headers: { 'Content-Type': 'multipart/form-data' } };
        		this.$nicemip.ajax('{$domain}/setting/ApiAdminSetting/settingUpload', form, config ).then(function(res) {
        			
                    if(res.code == 1) {
                    	
  						if(type == 'logo'){
  							that.addpL = true;
  							that.addhL = false;
  							that.imgLogo = res.data.siteImgArr;
  							that.setting.siteLogo = res.data.file_name;  
  						}else{
  							that.addpI = true;
  							that.addhI = false;
  							that.imgList = res.data.siteImgArr;
  							that.setting.siteImg = res.data.file_name;  
  						}
                        

                    }
                });
	      	},

	      //多图上传
	      	addPic(e,type){
                e.preventDefault();
                if(type == 'logo'){
                	$('input[name=fileLogo]').trigger('click');
                }else{
                	$('input[name=fileBanner]').trigger('click');
                }     
                return false;
            },

        }
    })
  </script>
   <script type="text/javascript">
	$(function(){
		$("#color_b").bigColorpicker(function(el,color){
			 $("input[name='siteColor']").val(color);
			 $("#color_b").css('background',color);
	                //触发一下该input的input事件
	         $("input[name='siteColor']")[0].dispatchEvent(new Event('input'))
		});
	})
	

    </script>
{/block}